<template>
  <view class="reviews-page">
    <!-- 评价统计 -->
    <view class="review-stats">
      <view class="stats-item">
        <text class="stats-number">{{ totalCount }}</text>
        <text class="stats-label">总评价</text>
      </view>
      <view class="stats-item">
        <text class="stats-number">{{ averageRating.toFixed(1) }}</text>
        <text class="stats-label">平均评分</text>
      </view>
      <view class="stats-item">
        <text class="stats-number">{{ goodRate }}%</text>
        <text class="stats-label">好评率</text>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-tabs">
      <view
        v-for="tab in filterTabs" 
        :key="tab.value"
        :class="['filter-tab', { active: currentFilter === tab.value }]"
        @click="switchFilter(tab.value)"
      >
        <text class="tab-text">{{ tab.label }}</text>
        <text class="tab-count">({{ tab.count }})</text>
      </view>
    </view>

    <!-- 评价列表 -->
    <view class="review-list">
      <view
        v-for="review in filteredReviews" 
        :key="review.id" 
        class="review-item"
      >
        <view class="review-user">
          <image :src="review.avatar || '/static/images/default-avatar.png'" class="user-avatar" mode="aspectFill" />
          <view class="user-info">
            <text class="user-name">{{ review.nickname }}</text>
            <view class="review-rating">
              <text 
                v-for="i in 5" 
                :key="i" 
                :class="['star', { active: i <= review.evaluation }]"
              >★</text>
              <text class="rating-text">{{ review.evaluation }}分</text>
            </view>
          </view>
          <view class="review-header-right">
            <text class="review-time">{{ formatTime(review.createTime) }}</text>
          </view>
        </view>
        <view class="review-content">{{ review.content }}</view>
        <!-- 评价图片 -->
        <view class="review-images" v-if="review.imgUrl && review.imgUrl.length > 0">
          <image 
            v-for="(img, index) in review.imgUrl.split(',')" 
            :key="index"
            :src="img"
            class="review-img"
            mode="aspectFill"
            @click="previewImage(review.imgUrl.split(','), index)"
          />
        </view>
        <!-- 主评论的回复按钮 - 移动到图片下面 -->
        <view class="main-reply-btn-container">
          <view class="main-reply-btn" @click="replyToReview(review)">
            <text class="main-reply-icon">💬</text>
            <text class="main-reply-text">回复</text>
          </view>
        </view>
        <!-- 评论按钮和回复列表 -->
        <view class="comment-section">
          <!-- 回复列表 -->
          <view class="replies-container" v-if="review.replies && review.replies.length > 0">
            <view
              v-for="(reply, replyIndex) in getDisplayReplies(review)" 
              :key="reply.id" 
              class="reply-item"
            >
              <view class="reply-user">
                <image :src="reply.avatar || '/static/images/default-avatar.png'" class="reply-avatar" mode="aspectFill" />
                <view class="reply-info">
                  <view class="reply-username-row">
                    <text class="reply-username">{{ reply.userName }}</text>
                    <text v-if="reply.replierUserName" class="reply-to-info">回复 {{ reply.replierUserName }}</text>
                  </view>
                  <text class="reply-time">{{ formatTime(reply.createTime) }}</text>
                </view>
              </view>
              <view class="reply-content">
                {{ reply.content }}
              </view>
              <!-- 回复按钮 - 为所有回复添加 -->
              <view class="reply-actions">
                <view class="reply-btn" @click="replyToComment(review, reply)">
                  <text class="reply-icon">💬</text>
                  <text class="reply-text">回复</text>
                </view>
              </view>
              <!-- 嵌套回复 -->
              <view class="nested-replies" v-if="reply.children && reply.children.length > 0">
                <view
                  v-for="childReply in reply.children" 
                  :key="childReply.id" 
                  class="nested-reply-item"
                >
                  <view class="nested-reply-user">
                    <image :src="childReply.avatar || '/static/images/default-avatar.png'" class="nested-reply-avatar" mode="aspectFill" />
                    <view class="nested-reply-info">
                      <view class="nested-reply-username-row">
                        <text class="nested-reply-username">{{ childReply.userName }}</text>
                        <text v-if="childReply.replierUserName" class="reply-to-info">回复 {{ childReply.replierUserName }}</text>
                      </view>
                      <text class="nested-reply-time">{{ formatTime(childReply.createTime) }}</text>
                    </view>
                  </view>
                  <view class="nested-reply-content">
                    {{ childReply.content }}
                  </view>
                  <!-- 嵌套回复的回复按钮 -->
                  <view class="nested-reply-actions">
                    <view class="nested-reply-btn" @click="replyToComment(review, childReply, reply)">
                      <text class="nested-reply-icon">💬</text>
                      <text class="nested-reply-text">回复</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 展开/收起按钮 -->
            <view class="expand-replies-btn" v-if="review.replies && review.replies.length > defaultShowReplies">
              <view class="expand-btn" @click="toggleReplies(review.id)">
                <text class="expand-icon">{{ isExpanded(review.id) ? '▼' : '▶' }}</text>
                <text class="expand-text">{{ isExpanded(review.id) ? '收起' : `展开${review.replies.length - defaultShowReplies}条回复` }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-status" v-if="loading">
      <text class="loading-text">加载中...</text>
    </view>
    <!-- 懒加载状态 -->
    <view class="loading-more" v-if="loadingMore">
      <text class="loading-more-text">加载更多...</text>
    </view>
    <!-- 没有更多数据 -->
    <view class="no-more" v-if="!hasMore && reviewList.length > 0 && !loading">
      <text class="no-more-text">没有更多评价了</text>
    </view>
    <!-- 空状态 -->
    <view v-if="filteredReviews.length === 0 && !loading" class="empty-state">
      <image src="/static/images/empty-reviews.png" class="empty-img" mode="widthFix" />
      <text class="empty-text">暂无评价</text>
    </view>
    <!-- 回复弹窗 -->
    <view v-if="showReplyModal" class="reply-modal-overlay" @click="closeReplyModal">
      <view class="reply-modal" @click.stop>
        <view class="reply-modal-header">
          <text class="reply-modal-title">回复评价</text>
          <text class="reply-modal-close" @click="closeReplyModal">×</text>
        </view>
        <view class="reply-modal-content">
          <view class="reply-target">
            <text class="reply-target-text" v-if="currentReplyTarget">
              回复 {{ currentReplyTarget.userName }} 的评论
            </text>
            <text class="reply-target-text" v-else>
              回复 {{ currentReplyReview && currentReplyReview.nickname }} 的评价
            </text>
          </view>
          <view class="reply-chain" v-if="currentReplyTarget">
            <text class="reply-chain-text">回复链：{{ currentReplyReview && currentReplyReview.nickname }} → {{ currentReplyTarget.userName }}</text>
          </view>
          <textarea 
            v-model="replyContent"
            class="reply-textarea"
            placeholder="说点什么..."
            :maxlength="200"
            auto-height
          ></textarea>
          <view class="reply-char-count">{{ replyContent.length }}/200</view>
        </view>
        <view class="reply-modal-footer">
          <button class="reply-cancel-btn" @click="closeReplyModal">取消</button>
          <button class="reply-submit-btn" @click="submitReplyContent">发送</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getReviewList,addReply } from '@/api/review/review'

export default {
         data() {
         return {
           productId: '',
           reviewList: [],
           currentPage: 1,
           pageSize: 10,
           hasMore: true,
           loading: false,
           loadingMore: false, // 专门用于懒加载的状态
           currentFilter: 'all',
           filterTabs: [
             { label: '全部', value: 'all', count: 0 },
             { label: '好评', value: 'good', count: 0 },
             { label: '中评', value: 'medium', count: 0 },
             { label: '差评', value: 'bad', count: 0 }
           ],
           showReplyModal: false,
           replyContent: '',
           currentReplyReview: null,
           currentReplyTarget: null,
           currentParentComment: null,
           // 回复展开状态管理
           expandedReplies: {}, // 存储每个评论的回复展开状态
           defaultShowReplies: 3 // 默认显示的回复数量
         }
       },
  computed: {
    totalCount() {
      return this.reviewList.length
    },
    averageRating() {
      if (this.reviewList.length === 0) return 0
      const total = this.reviewList.reduce((sum, review) => sum + review.evaluation, 0)
      return total / this.reviewList.length
    },
    goodRate() {
      if (this.reviewList.length === 0) return 0
      const goodCount = this.reviewList.filter(review => review.evaluation >= 4).length
      return Math.round((goodCount / this.reviewList.length) * 100)
    },
    filteredReviews() {
      switch (this.currentFilter) {
        case 'good':
          return this.reviewList.filter(review => review.evaluation >= 4)
        case 'medium':
          return this.reviewList.filter(review => review.evaluation >= 3 && review.evaluation < 4)
        case 'bad':
          return this.reviewList.filter(review => review.evaluation < 3)
        default:
          return this.reviewList
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    async loadReviews() {
      if (this.loading) return Promise.resolve()
      
      this.loading = true
      try {
        const res = await getReviewList({
          productId: this.productId,
          page: this.currentPage,
          size: this.pageSize
        })
        
        if (res.code === 200 && res.data) {
          const newReviews = Array.isArray(res.data) ? res.data : res.data.rows || []
          
          if (this.currentPage === 1) {
            this.reviewList = newReviews
          } else {
            this.reviewList = [...this.reviewList, ...newReviews]
          }
          
          this.hasMore = newReviews.length === this.pageSize
          this.updateFilterCounts()
        }
      } catch (error) {
        console.error('获取评价列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
      
      return Promise.resolve()
    },
    
    loadMore() {
      if (this.hasMore && !this.loading && !this.loadingMore) {
        this.loadingMore = true
        this.currentPage++
        this.loadReviews().then(() => {
          this.loadingMore = false
        }).catch(() => {
          this.loadingMore = false
        })
      }
    },
    
    switchFilter(filter) {
      this.currentFilter = filter
    },
    
    updateFilterCounts() {
      const goodCount = this.reviewList.filter(review => review.evaluation >= 4).length
      const mediumCount = this.reviewList.filter(review => review.evaluation >= 3 && review.evaluation < 4).length
      const badCount = this.reviewList.filter(review => review.evaluation < 3).length
      
      this.filterTabs[0].count = this.reviewList.length
      this.filterTabs[1].count = goodCount
      this.filterTabs[2].count = mediumCount
      this.filterTabs[3].count = badCount
    },
    
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      
      // 小于1分钟
      if (diff < 60000) {
        return '刚刚'
      }
      // 小于1小时
      if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前'
      }
      // 小于24小时
      if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前'
      }
      // 小于30天
      if (diff < 2592000000) {
        return Math.floor(diff / 86400000) + '天前'
      }
      // 超过30天显示具体日期
      return date.toLocaleDateString()
    },
    
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    },
    
    // 对图片进行评论
    commentOnImage(review, img) {
      // 显示评论输入框
      uni.showModal({
        title: '评论图片',
        content: '请输入您的评论',
        editable: true,
        placeholderText: '说点什么...',
        success: (res) => {
          if (res.confirm && res.content) {
            this.submitImageComment(review, img, res.content)
          }
        }
      })
    },
    
    // 提交图片评论
    async submitImageComment(review, img, content) {
      try {
        // 这里可以调用后端API提交图片评论
        // 暂时显示成功提示
        uni.showToast({
          title: '评论成功',
          icon: 'success'
        })
        
        // 可以在这里刷新评论列表
        // this.loadReviews()
      } catch (error) {
        console.error('提交图片评论失败:', error)
        uni.showToast({
          title: '评论失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 回复评价
    replyToReview(review) {
      this.currentReplyReview = review
      this.currentReplyTarget = null
      this.showReplyModal = true
    },
    
    // 回复评论
    replyToComment(review, comment, parentComment = null) {
      this.currentReplyReview = review
      this.currentReplyTarget = comment
      this.currentParentComment = parentComment // 添加父级评论信息
      this.showReplyModal = true
    },
    
    // 关闭回复弹窗
    closeReplyModal() {
      this.showReplyModal = false
      this.replyContent = ''
      this.currentReplyReview = null
      this.currentReplyTarget = null
      this.currentParentComment = null
    },
    
    // 提交回复
    submitReplyContent() {
      if (!this.replyContent.trim()) {
        uni.showToast({
          title: '请输入回复内容',
          icon: 'none'
        })
        return
      }
      
      if (this.currentReplyTarget) {
        // 回复评论
        this.submitCommentReply(this.currentReplyReview, this.currentReplyTarget, this.replyContent)
      } else {
        // 回复评价
        this.submitReply(this.currentReplyReview, this.replyContent)
      }
      this.closeReplyModal()
    },
    async submitReply(review, content) {
      try {
        // 构建回复主评论的参数
        const replyParams = {
          productCommentId: review.id, // 商品评论表id
          userId: this.getCurrentUserId(), // 当前用户id
          userName: this.getCurrentUserName(), // 当前用户名
          content: content, // 回复内容
          avatar: this.getCurrentUserAvatar(), // 当前用户头像
          delFlag: '0', // 删除标志
          createTime: new Date().toISOString(), // 创建时间
          pid: 0, // 父级id（0表示回复主评论）
          replierUserId: review.userId || review.user_id, // 被回复人id（主评论用户的ID）
        }
        
        console.log('=== 回复主评论参数详情 ===')
        console.log('商品评论ID:', review.id)
        console.log('当前用户ID:', this.getCurrentUserId())
        console.log('当前用户名:', this.getCurrentUserName())
        console.log('父级ID:', 0)
        console.log('被回复人ID（主评论用户）:', replyParams.replierUserId)
        console.log('被回复人名称（主评论用户）:', replyParams.replierUserName)
        console.log('完整回复参数:', replyParams)
        console.log('==================')
        
        // 调用后端API提交回复
        const res = await addReply(replyParams)
        
        if (res.code === 200) {
          uni.showToast({
            title: '回复成功',
            icon: 'success'
          })
          
          // 刷新评论列表
          this.loadReviews()
        } else {
          uni.showToast({
            title: res.msg || '回复失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('提交回复失败:', error)
        uni.showToast({
          title: '回复失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 提交评论回复
    async submitCommentReply(review, comment, content) {
      try {
        // 打印详细的回复参数信息
        this.logReplyDetails(review, comment, this.currentParentComment)
        
        // 构建回复参数
        const replyParams = {
          productCommentId: review.id, // 商品评论表id
          userId: this.getCurrentUserId(), // 当前用户id
          userName: this.getCurrentUserName(), // 当前用户名
          content: content, // 回复内容
          avatar: this.getCurrentUserAvatar(), // 当前用户头像
          delFlag: '0', // 删除标志
          createTime: new Date().toISOString(), // 创建时间
          pid: comment.id, // 父级id（被回复评论的ID，即张三的主键ID）
          replierUserId: comment.userId || comment.user_id, // 被回复人id
          replierUserName: comment.userName || comment.user_name // 被回复人名称
        }
        
        console.log('完整回复参数:', replyParams)
        
        // 调用后端API提交评论回复
        const res = await addReply(replyParams)
        
        if (res.code === 200) {
          uni.showToast({
            title: '回复成功',
            icon: 'success'
          })
          
          // 刷新评论列表
          this.loadReviews()
        } else {
          uni.showToast({
            title: res.msg || '回复失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('提交评论回复失败:', error)
        uni.showToast({
          title: '回复失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 获取当前用户ID
    getCurrentUserId() {
      const userInfo = uni.getStorageSync('userInfo')
      // 优先使用id，如果没有则使用userId，都没有则使用默认值
      return userInfo ? (userInfo.id || userInfo.userId || 1) : 1
    },
    
    // 获取当前用户名
    getCurrentUserName() {
      const userInfo = uni.getStorageSync('userInfo')
      // 优先使用nickname，如果没有则使用username，都没有则使用默认值
      return userInfo ? (userInfo.nickname || userInfo.username || userInfo.name || '当前用户') : '当前用户'
    },
    
    // 获取当前用户头像
    getCurrentUserAvatar() {
      const userInfo = uni.getStorageSync('userInfo')
      return userInfo ? userInfo.avatar : '/static/images/default-avatar.png'
    },
    

    
         // 打印回复参数详情
     logReplyDetails(review, comment, parentComment) {
       console.log('=== 回复参数详情 ===')
       console.log('商品评论ID:', review.id)
       console.log('当前用户ID:', this.getCurrentUserId())
       console.log('当前用户名:', this.getCurrentUserName())
       
       // 显示当前用户信息详情
       const userInfo = uni.getStorageSync('userInfo')
       console.log('用户信息详情:', userInfo)
       
              if (parentComment) {
         console.log('父级ID（张三）:', parentComment.id)
         console.log('父级用户名（张三）:', parentComment.userName)
         console.log('被回复人ID（王五）:', comment.userId || comment.user_id)
         console.log('被回复人名称（王五）:', comment.userName || comment.user_name)
       } else {
         console.log('父级ID（张三的主键ID）:', comment.id)
         console.log('被回复人ID（张三）:', comment.userId || comment.user_id)
         console.log('被回复人名称（张三）:', comment.userName || comment.user_name)
       }
       console.log('==================')
     },
     
     // 获取要显示的回复列表
     getDisplayReplies(review) {
       if (!review.replies || review.replies.length === 0) {
         return []
       }
       
       if (this.isExpanded(review.id)) {
         return review.replies
       } else {
         return review.replies.slice(0, this.defaultShowReplies)
       }
     },
     
     // 检查回复是否已展开
     isExpanded(reviewId) {
       return this.expandedReplies[reviewId] || false
     },
     
     // 切换回复展开状态
     toggleReplies(reviewId) {
       this.$set(this.expandedReplies, reviewId, !this.isExpanded(reviewId))
     },

  },
  
  onLoad(options) {
    if (options.productId) {
      this.productId = options.productId
      this.loadReviews()
    }
  },
  
  // 页面触底事件 - 实现懒加载
  onReachBottom() {
    if (this.hasMore && !this.loading && !this.loadingMore) {
      this.loadMore()
    }
  },
  
  // 下拉刷新
  onPullDownRefresh() {
    this.currentPage = 1
    this.hasMore = true
    this.loadReviews().then(() => {
      uni.stopPullDownRefresh()
    })
  }
}
</script>

<style lang="scss" scoped>
.reviews-page {
  min-height: 100vh;
  background: #f5f5f5;
}



.review-stats {
  display: flex;
  background: #fff;
  padding: 30rpx 24rpx;
  margin-bottom: 20rpx;
}

.stats-item {
  flex: 1;
  text-align: center;
  border-right: 1rpx solid #f0f0f0;
}

.stats-item:last-child {
  border-right: none;
}

.stats-number {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b35;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #999;
}

.filter-tabs {
  display: flex;
  background: #fff;
  padding: 0 24rpx;
  margin-bottom: 20rpx;
}

.filter-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-bottom: 4rpx solid transparent;
}

.filter-tab.active {
  border-bottom-color: #ff6b35;
}

.tab-text {
  font-size: 28rpx;
  color: #333;
}

.tab-count {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.review-list {
  background: #fff;
}

.review-item {
  padding: 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
}

.review-item:last-child {
  border-bottom: none;
}

.review-user {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 4rpx;
  display: block;
}

.review-rating {
  display: flex;
  align-items: center;
}

.star {
  font-size: 24rpx;
  color: #ddd;
  margin-right: 2rpx;
}

.star.active {
  color: #ff6b35;
}

.rating-text {
  font-size: 24rpx;
  color: #ff6b35;
  margin-left: 8rpx;
}

.review-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}



.review-time {
  font-size: 24rpx;
  color: #999;
}

/* 主评论回复按钮容器 - 图片下面 */
.main-reply-btn-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16rpx;
}

/* 主评论回复按钮样式 */
.main-reply-btn {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(21, 101, 192, 0.3);
}

.main-reply-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(21, 101, 192, 0.4);
}

.main-reply-icon {
  font-size: 20rpx;
  margin-right: 6rpx;
  color: #fff;
}

.main-reply-text {
  font-size: 22rpx;
  color: #fff;
  font-weight: 500;
}



.review-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
}

.review-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  background: #f5f5f5;
  margin-right: 8rpx;
  margin-bottom: 8rpx;
}



/* 回复相关样式 */
.comment-section {
  margin-top: 20rpx;
}

.replies-container {
  margin-bottom: 16rpx;
  padding: 16rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.reply-item {
  background: #fff;
  border-radius: 8rpx;
  padding: 12rpx;
  margin-bottom: 12rpx;
  border: 1rpx solid #e9ecef;
  position: relative;
}

.reply-user {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.reply-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.reply-info {
  flex: 1;
}

 .reply-username-row {
   display: flex;
   align-items: center;
   gap: 8rpx;
 }
 
 .reply-username {
   font-size: 24rpx;
   color: #333;
   font-weight: 500;
 }

.reply-time {
  font-size: 22rpx;
  color: #999;
  margin-top: 2rpx;
  display: block;
}

 .reply-content {
   font-size: 26rpx;
   color: #333;
   line-height: 1.4;
   margin-bottom: 12rpx;
 }
 
 .reply-to-info {
   color: #1976d2;
   font-weight: 500;
   font-size: 22rpx;
 }
 
 .nested-reply-content .reply-to-info {
   font-size: 22rpx;
   color: #7b1fa2;
 }

.nested-replies {
  margin-left: 20rpx;
  margin-top: 12rpx;
}

.nested-reply-item {
  background: #f8f9fa;
  border-radius: 6rpx;
  padding: 10rpx;
  margin-bottom: 8rpx;
  border-left: 3rpx solid #667eea;
}

.nested-reply-user {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}

.nested-reply-avatar {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  margin-right: 8rpx;
}

.nested-reply-info {
  flex: 1;
}

 .nested-reply-username-row {
   display: flex;
   align-items: center;
   gap: 6rpx;
 }
 
 .nested-reply-username {
   font-size: 22rpx;
   color: #333;
   font-weight: 500;
 }

.nested-reply-time {
  font-size: 20rpx;
  color: #999;
  margin-top: 2rpx;
  display: block;
}

.nested-reply-content {
  font-size: 24rpx;
  color: #333;
  line-height: 1.4;
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8rpx;
}

.reply-btn {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1rpx solid #90caf9;
}

.reply-btn:active {
  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
  transform: translateY(1rpx);
}

.reply-icon {
  font-size: 22rpx;
  margin-right: 6rpx;
  color: #1976d2;
}

.reply-text {
  font-size: 24rpx;
  color: #1976d2;
  font-weight: 500;
}

/* 嵌套回复按钮样式 */
.nested-reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6rpx;
}

.nested-reply-btn {
  display: flex;
  align-items: center;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1rpx solid #ce93d8;
}

.nested-reply-btn:active {
  background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
  transform: translateY(1rpx);
}

.nested-reply-icon {
  font-size: 18rpx;
  margin-right: 4rpx;
  color: #7b1fa2;
}

 .nested-reply-text {
   font-size: 20rpx;
   color: #7b1fa2;
   font-weight: 500;
 }
 
 /* 展开/收起按钮样式 */
 .expand-replies-btn {
   display: flex;
   justify-content: center;
   margin-top: 16rpx;
   padding-top: 12rpx;
   border-top: 1rpx solid #e9ecef;
 }
 
 .expand-btn {
   display: flex;
   align-items: center;
   padding: 8rpx 16rpx;
   border-radius: 16rpx;
   background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
   cursor: pointer;
   transition: all 0.3s ease;
   border: 1rpx solid #d0d0d0;
 }
 
 .expand-btn:active {
   background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
   transform: translateY(1rpx);
 }
 
 .expand-icon {
   font-size: 20rpx;
   margin-right: 6rpx;
   color: #666;
 }
 
 .expand-text {
   font-size: 24rpx;
   color: #666;
   font-weight: 500;
 }



/* 回复弹窗样式 */
.reply-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.reply-modal {
  width: 90%;
  max-width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.2);
}

.reply-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 30rpx 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.reply-modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.reply-modal-close {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
  padding: 10rpx;
}

.reply-modal-content {
  padding: 30rpx;
}

.reply-target {
  margin-bottom: 20rpx;
}

.reply-target-text {
  font-size: 28rpx;
  color: #666;
}

.reply-chain {
  margin-bottom: 16rpx;
  padding: 12rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  border-left: 3rpx solid #667eea;
}

.reply-chain-text {
  font-size: 24rpx;
  color: #666;
  font-style: italic;
}

.reply-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  background: #fafafa;
  resize: none;
}

.reply-textarea:focus {
  border-color: #667eea;
  background: #fff;
}

.reply-char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.reply-modal-footer {
  display: flex;
  padding: 20rpx 30rpx 30rpx 30rpx;
  gap: 20rpx;
}

.reply-cancel-btn {
  flex: 1;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  background: #fff;
  color: #666;
  font-size: 28rpx;
}

.reply-submit-btn {
  flex: 1;
  height: 80rpx;
  border: none;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
}

.loading-status {
  text-align: center;
  padding: 30rpx;
  background: #fff;
  margin-top: 20rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.loading-more {
  text-align: center;
  padding: 20rpx;
  background: #fff;
  margin-top: 10rpx;
}

.loading-more-text {
  font-size: 26rpx;
  color: #999;
}

.no-more {
  text-align: center;
  padding: 30rpx;
  background: #fff;
  margin-top: 20rpx;
}

.no-more-text {
  font-size: 28rpx;
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  background: #fff;
}

.empty-img {
  width: 200rpx;
  margin-bottom: 20rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style> 